<template>
  <fl-navBar
    dark
    :border="false"
    title="听课评价"
    left-icon="left"
    color="#333333"
    :fixed="true"
    background-color="#fff"
    status-bar
  />
  <view class="courseEvaluateDetail">
    <view class="coursecontent">
      <uni-collapse v-model="openInfo" ref="collapse">
        <uni-collapse-item
          name="1"
          border
          class="collapse-item"
          title-border="none"
          :border="false"
        >
          <template v-slot:title>
            <view class="doc_msg">
              <text class="line"></text>
              <text class="doc_title">基础信息</text>
            </view>
          </template>
          <view class="detail_content">
            <view class="detail_item">
              <text class="item_key">任务名称</text>
              <text class="item_value">{{ form.taskName }}</text>
            </view>
            <view class="detail_item">
              <text class="item_key">被听课老师</text>
              <text class="item_value">{{ form.teacherUserName }}</text>
            </view>
            <view class="detail_item" v-if="params.status !== '2'">
              <text class="item_key">督导人员</text>
              <text class="item_value">{{ checkerNames }}</text>
            </view>
            <view class="detail_item">
              <text class="item_key">听课班级</text>
              <text class="item_value">{{ form.className }}</text>
            </view>
            <view class="detail_item">
              <text class="item_key">听课日期</text>
              <text class="item_value">{{ form.listenCourseDate }}</text>
            </view>
            <view class="detail_item">
              <text class="item_key">听课时间</text>
              <text class="item_value">{{ form.startTime + "-" + form.endTime }}</text>
            </view>
            <view class="detail_item">
              <text class="item_key">课程</text>
              <text class="item_value">{{ form.courseName }}</text>
            </view>
          </view>
        </uni-collapse-item>
      </uni-collapse>
      <view v-if="params.status !== '2'" class="coursecontent_tabs">
        <fl-tabs
          :styleObj="{ fontSize: '28rpx' }"
          :current="current"
          @tabsChange="tabsChange"
          :list="list"
        />
        <view class="course_contentItem">
          <view class="zxqk" v-if="current == 0">
            <view class="zxqk_item" v-for="(ele, index) in eduTaskList" :key="index">
              <view class="statusItem">
                <view class="playStstus" v-if="ele.taskStatus === '0'">待接收</view>
                <view class="playStstus" v-if="ele.taskStatus === '1'">进行中</view>
                <view class="playStstus" v-if="ele.taskStatus === '2'">已完成</view>
                <image
                  v-if="ele.taskStatus === '0'"
                  class="statusImg"
                  mode="withFix"
                  src="@/static/images/app_center/pnone.png"
                  alt=""
                />
                <image
                  v-if="ele.taskStatus === '1'"
                  class="statusImg"
                  mode="withFix"
                  src="@/static/images/app_center/pdoing.png"
                  alt=""
                />
                <image
                  v-if="ele.taskStatus === '2'"
                  class="statusImg"
                  mode="withFix"
                  src="@/static/images/app_center/psuccess.png"
                  alt=""
                />
              </view>
              <view class="statustext">{{ ele.checkerName }}</view>
            </view>
          </view>
          <view class="xq" v-if="current == 1">
            <fl-tableList :eduTaskList="eduTaskList" />
          </view>
          <view v-if="current == 2" class="ddzfile">
            <FileList :fileList="ddzFile" />
          </view>
          <view v-if="current == 3" class="teachersfile">
            <FileList :fileList="teacherFiles" />
          </view>
        </view>
      </view>
      <!-- 申诉模块 -->
      <view class="appear_container" v-if="params.status === '2'">
        <view class="doc_msg">
          <text class="line"></text>
          <text class="doc_title">听课申诉</text>
        </view>
        <view class="w710">
          <view class="item_key">申诉原因</view>
          <view class="item_value" style="width: 100%">{{
            form.eduListenCourseEvalTaskAppea.appealReason
          }}</view>
        </view>
        <view class="w710">
          <view class="item_key">申诉附件</view>
          <view class="item_value">
            <fl-fileList
              v-if="ssFiles.length > 0"
              :closeShow="false"
              :fileList="ssFiles"
            />
          </view>
        </view>
        <view class="detail_item w710">
          <uni-forms
            style="width: 100%"
            label-width="80px"
            :rules="customRules"
            ref="valiForm"
            :modelValue="forms"
          >
            <uni-forms-item label="审核意见" required name="approveStatus">
              <uni-data-select
                :clear="false"
                v-model="forms.approveStatus"
                :localdata="[
                  { text: '不通过', value: '3' },
                  { text: '通过', value: '2' },
                ]"
              ></uni-data-select>
            </uni-forms-item>
            <uni-forms-item label="审核建议" required name="approveReason">
              <uni-easyinput
                :clearable="false"
                type="textarea"
                v-model="forms.approveReason"
                placeholder="请输入审核建议"
              />
            </uni-forms-item>
          </uni-forms>
        </view>
      </view>
    </view>
  </view>
  <view class="confire" :style="{ bottom: safeAreaInsets.bottom + 'px' }">
    <button
      v-if="params.status === '2'"
      style="width: 90%"
      type="primary"
      @click="submit('valiForm')"
    >
      提交
    </button>
  </view>
</template>

<script setup>
import { ref, nextTick } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import {
  listenCourseEvalTaskDetail,
  appealCheck,
} from "@/api/courseEvaluateCont/received";
import FileList from "@/pages/courseEvaluateDetail/fileList.vue";
const { safeAreaInsets } = uni.getSystemInfoSync();
import modal from "@/plugins/modal";
const openInfo = ref(["1"]);

const current = ref(0);
const eduTaskList = ref([]);

const collapse = ref();
const valiForm = ref();
const teacherFiles = ref([]);
const checkerNames = ref([]);
const ddzFile = ref([]);
const ssFiles = ref([]);
const form = ref({});
const params = ref({});
const forms = ref({});

const eduTaskAppea = ref({});
const customRules = {
  approveStatus: {
    rules: [
      {
        required: true,
        errorMessage: " ",
      },
    ],
  },
  approveReason: {
    rules: [
      {
        required: true,
        errorMessage: " ",
      },
    ],
  },
};
const list = ref([
  {
    id: 0,
    name: "执行情况",
  },
  {
    id: 1,
    name: "详情",
  },
  {
    id: 2,
    name: "督导组附件",
  },
  {
    id: 3,
    name: "教师附件",
  },
]);
function tabsChange(index) {
  current.value = index;
}
async function getList(id) {
  const res = await listenCourseEvalTaskDetail(id);
  form.value = { ...res.data };
  // 申诉原因
  if (res.data.eduListenCourseEvalTaskAppea) {
    eduTaskAppea.value = res.data.eduListenCourseEvalTaskAppea;
  }
  if (res.data.eduListenCourseEvalSubTaskList.length > 0) {
    eduTaskList.value = res.data.eduListenCourseEvalSubTaskList;
    checkerNames.value = res.data.eduListenCourseEvalSubTaskList
      .map((ele) => {
        return ele.checkerName;
      })
      .join(",");
    let files = [];
    eduTaskList.value.forEach((v) => {
      if (v.tkclFilePath) {
        files.push(...JSON.parse(v.tkclFilePath));
      }
    });
    ddzFile.value = files;
  }
  teacherFiles.value = [
    ...(JSON.parse(res.data.jxdgFilePath) || []),
    ...(JSON.parse(res.data.jxjdbFilePath) || []),
    ...(JSON.parse(res.data.otherFilePath) || []),
  ];
  nextTick(() => {
    collapse.value.resize();
  });
}
function submit(ref) {
  valiForm.value
    .validate()
    .then(async (res) => {
      let par = {
        id: form.value.id,
        approveReason: forms.value.approveReason,
        approveStatus: forms.value.approveStatus,
      };
      await appealCheck(par);
      uni.setStorageSync("load", "1");
      modal.msgSuccess("操作成功");
      uni.navigateBack();
    })
    .catch((err) => {
      modal.msgError("请填写必填项");
    });
}
onLoad((options) => {
  params.value = options;
  // 已下发，已完成
  if (options.status === "1" || options.status === "3") {
    getList(options.id);
  }
  // 申诉
  if (options.status === "2") {
    let cur = uni.getStorageSync("courses");
    form.value = { ...cur };
    ssFiles.value = JSON.parse(cur.eduListenCourseEvalTaskAppea.filePath || []);
  }
});
</script>

<style lang="scss" scoped>
.teachersfile {
  display: flex;
  flex-wrap: wrap;
}
page {
  display: flex;
  flex-direction: column;
}
.fileWrap {
  display: flex;
  flex-direction: column;
}
.confire {
  // position: fixed;
  // bottom: 0;
  // left: 0;
  width: 100%;
  flex: 1;
  display: flex;
  justify-content: space-around;
  margin-top: 30rpx;
}
.courseEvaluateDetail {
  height: 100%;
  overflow-y: scroll;
  background-color: #fff;
  .w710 {
    width: 710rpx;
    margin: 0 auto;
    padding: 20rpx 10rpx;
  }
  .detail_item {
    display: flex;
    padding: 20rpx 10rpx;
    background-color: #fff;
    border-bottom: 2rpx solid #ebedf0;

    .item_key,
    .item_value {
      color: #666666;
      font-size: 28rpx;
    }
    .item_key {
      width: 180rpx;
    }
    .item_value {
      flex: 1;
      color: #333333;
    }
  }
  .doc_msg {
    display: flex;
    align-items: center;
    height: 100rpx;
    font-size: 32rpx;
    font-weight: 700;
    color: #000;
    padding-left: 25rpx;

    .line {
      width: 6rpx;
      height: 30rpx;
      background-color: #2362a6;
      margin-right: 12rpx;
    }
  }
  .coursecontent {
    overflow-y: scroll;
    height: 100%;
  }
  .course_contentItem {
    margin-top: 40rpx;
  }
  .zxqk {
    display: flex;
    height: 100%;
    .zxqk_item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 25%;
      flex-wrap: wrap;
      .statustext {
        margin-top: 10rpx;
      }
      .statusItem {
        position: relative;
        width: 110rpx;
        height: 110rpx;
        border-radius: 50%;
        .playStstus {
          position: absolute;
          top: 50%;
          width: 100%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 24rpx;
          text-align: center;
        }
        .statusImg {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .ddzfile {
    display: flex;
    flex-wrap: wrap;
    .ddzfile_item {
      display: flex;
      justify-content: center;
      width: 50%;
      margin-bottom: 30rpx;

      img {
        width: 60rpx;
        height: 66rpx;
        margin-right: 26rpx;
      }
      .pdfNamebox {
        .pdfName {
          width: 220rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .pdfSize {
          font-size: 24rpx;
          color: #3f3f3f;
          margin-top: 6rpx;
        }
      }
    }
  }
  .collapse-item {
    height: 100%;
    background-color: #fff;
    .detail_content {
      width: 710rpx;
      margin: 0 auto;
      background-color: #fff;
      .coursecontent_tabs {
        margin-top: 20rpx;
      }
      .appear_container {
        width: 710rpx;
        margin: 0 auto;
      }
    }
  }
}
</style>
